<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <div>
            <!-- 1.鼠标事件 -->
            <!-- 2.键盘事件 -->
            <!-- 3.自定义事件 -->
            <!-- 监听用户的输入行为，把值赋值给name -->
            <!-- @input="fn" -->
            <input type="text" v-model="name">
            <button @click="fn">添加</button>
        </div>
        <ul>
            <li v-for="item in list">
                <button>{{item.name}}删除</button>
            </li>
        </ul>
        <ul>
            <li v-for="(item,index) in list">
                <button @click="list.splice(index,1)">{{item.name}}删除</button>
            </li>
        </ul>


    </div>



    <script src=" vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                name: "",
                list: [
                    { id: 1, name: "小明" },
                    { id: 2, name: "小红" },
                    { id: 3, name: "小刚" },

                ]

            },
            methods: {
                fn(e) {
                    this.list.push({
                        id: this.list.length + 1,
                        name: this.name
                    })

                },

            }


        });
    </script>
</body>

</html>